<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Ventes Privées</title>
</h:head>
<h:body>
	<ui:include src="header.xhtml" />

	<h3>Terminer votre commande</h3>
	<h:form>
		<p:growl id="growl" sticky="true" showDetail="true" />
		<p:wizard flowListener="#{commande.onFlowProcess}">

			<p:tab id="tabPannier" title="Rappel du panier">
				<p:panel header="Rappel du panier">
				
				<h1>Rappel du panier</h1>
				<h:messages errorClass="error" />
			    <p:dataTable var="monArticlePanier" value="#{commande.allArticlePanier}" id="panelPanier">
			        <p:column headerText="Libellé article" style="text-align:center"  >  
			            <h:outputText value="#{monArticlePanier.libelleArticle}"/>   
			        </p:column>  
			  
			        <p:column headerText="Taille" style="text-align:center">  
			            <h:outputText value="#{monArticlePanier.tailleChoisie.taille}"  />
			        </p:column>  
			
			        <p:column headerText="Couleur" style="text-align:center">  
			            <h:outputText value="#{monArticlePanier.couleurChoisie.couleur}" />  
			        </p:column>  
			
			        <p:column headerText="Quantité" style="text-align:center"> 
			        	<h:outputText value="#{monArticlePanier.quantiteDesiree}" /> 
			        </p:column>

			
			        <p:column headerText="Prix" style="text-align:center">
			            <h:outputText value="#{monArticlePanier.prixTotalArticlePanier}" />  
			        </p:column>  
						        
		            <p:columnGroup type="footer">  
			            <p:row>  
			                <p:column colspan="4" footerText="Total "  
			                                style="text-align:right"  />  
			  
			                <p:column footerText="#{commande.prixPanier} €" />  
	
			            </p:row>  
	        		</p:columnGroup>  
			        
			    </p:dataTable>  
		    				
				</p:panel>
			</p:tab>

			<p:tab id="tabAdresse" title="Adresse de livraison">
				<p:panel header="Adresse de livraison">

					<h:messages errorClass="error" />				
					<h1>Votre adresse de livraison</h1>

					<h:panelGrid columns="2" columnClasses="label, value"
						styleClass="grid">
						<h:outputText value="Nom" />
						<p:inputText id="nom" label="Nom"
							value="#{commande.adresseLivraison.nom}" />

						<h:outputText value="Prénom" />
						<p:inputText id="prenom" label="Prénom"
							value="#{commande.adresseLivraison.prenom}" />

						<h:outputText value="Raison sociale" />
						<p:inputText id="rs" label="Raison sociale"
							value="#{commande.adresseLivraison.raisonSociale}" />

						<h:outputText value="Rue " />
						<p:inputText required="true" label="rue"
							value="#{commande.adresseLivraison.rue1}"
							validator="#{commande.validateAdresse}" />

						<h:outputText value=" " />
						<p:inputText value="#{commande.adresseLivraison.rue2}" />

						<h:outputText value="Ville" />
						<h:panelGroup>
							<p:inputText required="true" label="ville"
								value="#{commande.adresseLivraison.ville}" />
							<h:outputText value=" code postal " />
							<p:inputText id="cp" required="true" label="code postal" size="5"
								value="#{commande.adresseLivraison.codePostal}">
								<f:validateLength minimum="4" maximum="5" />
							</p:inputText>

						</h:panelGroup>

					</h:panelGrid>

				</p:panel>
			</p:tab>

			<p:tab id="tabModeLivraison" title="Mode de livraison">
				<p:panel header="Mode de livraison">

					<h:messages errorClass="error" />				
					<h1>Votre mode de livraison</h1>
					
					<p:selectOneRadio id="options"
						value="#{commande.optionModeLivraison}">
							<f:selectItem itemLabel="Livraison standard 2€" itemValue="1" />
							<f:selectItem itemLabel="Livraison expresse (24h) 5€"
								itemValue="2" />
					</p:selectOneRadio>  
				</p:panel>
			</p:tab>

			<p:tab id="tabCommande" title="Validation Commande">
				<p:panel header="Validation Commande">
					<h:messages errorClass="error" />				
					<h1>Récapitulatif de la commande</h1>
					
			    <p:dataTable var="monArticlePanier" value="#{commande.allArticlePanier}" id="panelCommande">
			        <p:column headerText="Libellé article" style="text-align:center"  >  
			            <h:outputText value="#{monArticlePanier.libelleArticle}"/>   
			        </p:column>  
			  
			        <p:column headerText="Taille" style="text-align:center">  
			            <h:outputText value="#{monArticlePanier.tailleChoisie.taille}"  />
			        </p:column>  
			
			        <p:column headerText="Couleur" style="text-align:center">  
			            <h:outputText value="#{monArticlePanier.couleurChoisie.couleur}" />  
			        </p:column>  
			
			        <p:column headerText="Quantité" style="text-align:center"> 
			        	<h:outputText value="#{monArticlePanier.quantiteDesiree}" /> 
			        </p:column>
			            
			
			        <p:column headerText="Prix" style="text-align:center">
			            <h:outputText value="#{monArticlePanier.prixTotalArticlePanier}" />  
			        </p:column>  
						        
		            <p:columnGroup type="footer">  
			            <p:row>  
			                <p:column colspan="4" footerText="Frais de port "  
			                                style="text-align:right"  />  
			  
			                <p:column footerText="#{commande.fraisDePort}" />  
			  
			            </p:row> 
			            <p:row>  
			                <p:column colspan="4" footerText="Total "  
			                                style="text-align:right"  />  
			  
			                <p:column footerText="#{commande.totalCommande} €" />  
			  
			            </p:row>  
	        		</p:columnGroup>  
			        
			    </p:dataTable>  

				</p:panel>
			</p:tab>

			<p:tab id="tabPaiement" title="Paiement">
				<p:panel header="Paiement">
					<h:messages errorClass="error" />				
					<h1>Paiement</h1>
					
					<h:outputText value="Paiment sécurisé par carte bancaire"/>
					<h:graphicImage library="images"  name="cb.png" />
					
					<br/> 
					<p>
					<span>Montant <strong> #{commande.totalCommande} €</strong></span> 
					<span>Conversion donne </span>
				    <p:outputLabel id="autreDevise"><strong>#{commande.montantAutreDevise}</strong></p:outputLabel>
					<h:selectOneMenu  value="#{commande.devise}" style="font-size: 12;width: 100px; font-size: 12;">
						<f:selectItems value="#{commande.devises}"/>  
						<p:ajax update="autreDevise" event="valueChange"  listener="#{commande.onChangeDevise}"/>
					</h:selectOneMenu >
					</p>
					<br/>
					<h:commandButton value="Confirmer votre paiement" action="#{commande.create}"/>
				</p:panel>
			</p:tab>


		</p:wizard>

	</h:form>
</h:body>
</html>